<template>
  <view class="consulting-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <text class="nav-title">法律咨询</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 主要内容 -->
    <view class="main-content">
      <!-- 仲裁说明卡片 -->
      <view class="arbitration-card">
        <view class="card-header">
          <text class="card-title">仲裁说明</text>
        </view>
        <view class="card-content">
          <text class="content-text">
            网络借贷的及时性能快捷、经济的解决争议，给当事人提供极大的便利。网上仲裁采用现代信息技术，利用互联网开庭，仲裁管理以及仲裁效果。网络仲裁受法律认可，与书面仲裁协议具有同等的法律效力。
          </text>
        </view>
      </view>

      <!-- 法律服务列表 -->
      <!-- <view class="service-list">
        <view class="service-item" @click="handleServiceClick('consultation')">
          <view class="service-icon">
            <text class="icon">📋</text>
          </view>
          <view class="service-info">
            <text class="service-title">在线咨询</text>
            <text class="service-desc">专业律师在线解答法律问题</text>
          </view>
          <view class="service-arrow">
            <text class="arrow">›</text>
          </view>
        </view>

        <view class="service-item" @click="handleServiceClick('arbitration')">
          <view class="service-icon">
            <text class="icon">⚖️</text>
          </view>
          <view class="service-info">
            <text class="service-title">仲裁申请</text>
            <text class="service-desc">快速便捷的争议解决方案</text>
          </view>
          <view class="service-arrow">
            <text class="arrow">›</text>
          </view>
        </view>

        <view class="service-item" @click="handleServiceClick('contract')">
          <view class="service-icon">
            <text class="icon">📄</text>
          </view>
          <view class="service-info">
            <text class="service-title">合同审查</text>
            <text class="service-desc">专业合同条款审查服务</text>
          </view>
          <view class="service-arrow">
            <text class="arrow">›</text>
          </view>
        </view>

        <view class="service-item" @click="handleServiceClick('legal-aid')">
          <view class="service-icon">
            <text class="icon">🤝</text>
          </view>
          <view class="service-info">
            <text class="service-title">法律援助</text>
            <text class="service-desc">为您提供专业法律援助</text>
          </view>
          <view class="service-arrow">
            <text class="arrow">›</text>
          </view>
        </view>
      </view> -->

      <!-- 联系方式 -->
      <!-- <view class="contact-section">
        <view class="contact-title">
          <text class="title">联系我们</text>
        </view>
        <view class="contact-info">
          <view class="contact-item">
            <text class="contact-label">客服热线：</text>
            <text class="contact-value" @click="makeCall('400-123-4567')">400-123-4567</text>
          </view>
          <view class="contact-item">
            <text class="contact-label">工作时间：</text>
            <text class="contact-value">周一至周五 9:00-18:00</text>
          </view>
          <view class="contact-item">
            <text class="contact-label">邮箱地址：</text>
            <text class="contact-value">legal@example.com</text>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 处理服务点击
const handleServiceClick = (type) => {
  switch (type) {
    case 'consultation':
      uni.showToast({
        title: '在线咨询功能开发中',
        icon: 'none'
      })
      break
    case 'arbitration':
      uni.showToast({
        title: '仲裁申请功能开发中',
        icon: 'none'
      })
      break
    case 'contract':
      uni.showToast({
        title: '合同审查功能开发中',
        icon: 'none'
      })
      break
    case 'legal-aid':
      uni.showToast({
        title: '法律援助功能开发中',
        icon: 'none'
      })
      break
    default:
      break
  }
}

// 拨打电话
const makeCall = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
    fail: (err) => {
      console.log('拨打电话失败：', err)
    }
  })
}
</script>

<style scoped>
.consulting-container {
  min-height: 100vh;
  background: #f5f6fa;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-top: calc(var(--status-bar-height) + 20rpx);
  background: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f8f9fa;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.nav-placeholder {
  width: 60rpx;
}

/* 主要内容 */
.main-content {
  padding: 30rpx;
}

/* 仲裁说明卡片 */
.arbitration-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.card-content {
  line-height: 1.6;
}

.content-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
}

/* 法律服务列表 */
.service-list {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.service-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.service-item:last-child {
  border-bottom: none;
}

.service-item:active {
  background: #f8f9fa;
}

.service-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  margin-right: 24rpx;
}

.icon {
  font-size: 36rpx;
}

.service-info {
  flex: 1;
}

.service-title {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.service-desc {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.service-arrow {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  font-size: 32rpx;
  color: #ccc;
  font-weight: bold;
}

/* 联系方式 */
.contact-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.contact-title {
  margin-bottom: 24rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.contact-info {
  space-y: 16rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-label {
  font-size: 28rpx;
  color: #666;
  width: 160rpx;
}

.contact-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.contact-value[data-phone] {
  color: #667eea;
  text-decoration: underline;
}
</style>